<!-- 投票.html -->
<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>vote</title>
	<style>
	.vote{
		width: 700px;
		height:500px;
		margin: 20px auto;
		border-bottom: 3px solid black;
		position: relative;
	}
	.name{
		border-radius: 5px;
		width: 40px;
		margin-left:70px;
		margin-right: 60px;
		float: left;
		height: 100%;
		position:relative;
	}
	.people1,.people2,.people3,.people4{
		position: absolute;
		right:5px;
		bottom:-50px;
		font-family: "黑体";
	}
	#piao1,#piao2,#piao3,#piao4{
		position: absolute;
		right:5px;
		top:-20px;
		font-family: "黑体";
	}
	#name1{
		width: 40px;
		
		position: absolute;
		bottom: 0;
		animation:mymove 1s infinite;
	}
	#name2{
		width: 40px;
		position: absolute;
		bottom: 0;
		animation:mymove2 1s infinite;
	}
	#name3{
		width: 40px;
		position: absolute;
		bottom: 0;
		animation:mymove3 1s infinite;
	}
	#name4{
		width: 40px;
		position: absolute;
		bottom: 0;
		animation:mymove4 1s infinite;
	}
	@keyframes mymove{
		0%{background: radial-gradient(white 10%,red);}
		12%{ background:radial-gradient(white 10%,#FA9429);}
		25%{background: radial-gradient(white 10%,yellow);}
		37%{background: radial-gradient(white 10%,#4DE923);}
		50%{ background:radial-gradient(white 10%,#6B9BC3);}
		62%{ background:radial-gradient(white 10%,blue);}
		75%{ background:radial-gradient(white 10%,#6F57BC);}
		87%{ background:radial-gradient(white 10%,#B848FF);}
		100%{ background:radial-gradient(white 10%,red);}
	}
	@keyframes mymove2{
		0%{background: radial-gradient(white 10%,#B848FF);}
		12%{ background:radial-gradient(white 10%,red);}
		25%{background: radial-gradient(white 10%,#FA9429);}
		37%{background: radial-gradient(white 10%,yellow);}
		50%{ background:radial-gradient(white 10%,#4DE923);}
		62%{ background:radial-gradient(white 10%,#6B9BC3);}
		75%{ background:radial-gradient(white 10%,blue);}
		87%{ background:radial-gradient(white 10%,#6F57BC);}
		100%{ background:radial-gradient(white 10%,#B848FF);}
	}
	@keyframes mymove3{
		0%{background: radial-gradient(white 10%,#6F57BC);}
		12%{ background:radial-gradient(white 10%,#B848FF);}
		25%{background: radial-gradient(white 10%,red);}
		37%{background: radial-gradient(white 10%,#FA9429);}
		50%{ background:radial-gradient(white 10%,yellow);}
		62%{ background:radial-gradient(white 10%,#4DE923);}
		75%{ background:radial-gradient(white 10%,#6B9BC3);}
		87%{ background:radial-gradient(white 10%,blue);}
		100%{ background:radial-gradient(white 10%,#6F57BC);}
	}
	@keyframes mymove4{
		0%{background: radial-gradient(white 10%,blue);}
		12%{ background:radial-gradient(white 10%,#6F57BC);}
		25%{background: radial-gradient(white 10%,#B848FF);}
		37%{background: radial-gradient(white 10%,red);}
		50%{ background:radial-gradient(white 10%,#FA9429);}
		62%{ background:radial-gradient(white 10%,yellow);}
		75%{ background:radial-gradient(white 10%,#4DE923);}
		87%{ background:radial-gradient(white 10%,#6B9BC3);}
		100%{ background:radial-gradient(white 10%,blue);}
	}
	</style>
</head>
<body>
	<div class="vote">
		<div class="name"><div id="name1" class="a"><div id="piao1"></div><div class="people1">叶清</div></div></div>
		<div class="name"><div id="name2" class="a"><div id="piao2"></div><div class="people2">叶信</div></div></div>
		<div class="name"><div id="name3" class="a"><div id="piao3"></div><div class="people3">叶明</div></div></div>
		<div class="name"><div id="name4" class="a"><div id="piao4"></div><div class="people4">叶仁</div></div></div>
	</div>

	<script>
	var name1 =document.getElementById('name1');
	var step1=1;
	var oHeight1=0;
	var piao1=document.getElementById('piao1');
	var number1=Math.floor(Math.random()*100);
	var timerId1 =setInterval(function(){
		oHeight1+=step1;
		name1.style.height=oHeight1+"%";		
		piao1.innerHTML=oHeight1+"票";
		
		if(oHeight1>=number1){
			clearInterval(timerId1);
		}
	},100);

	var number2=Math.floor(Math.random()*100);
	var name2 =document.getElementById('name2');
	var step2=1;
	var oHeight2=0;
	var piao2=document.getElementById('piao2');
	var timerId2 =setInterval(function(){
		oHeight2+=step2;
		name2.style.height=oHeight2+"%";
		piao2.innerHTML=oHeight2+"票";
		if(oHeight2>=number2){
			clearInterval(timerId2);
		}
	},100);

	var number3=Math.floor(Math.random()*100);
	var name3 =document.getElementById('name3');
	var step3=1;
	var oHeight3=0;
	var piao3=document.getElementById('piao3');
	var timerId3 =setInterval(function(){
		oHeight3+=step3;
		name3.style.height=oHeight3+"%";
		piao3.innerHTML=oHeight3+"票";
		if(oHeight3>=number3){
			clearInterval(timerId3);
		}
	},100);

	var name4 =document.getElementById('name4');
	var step4=1;
	var oHeight4=0;
	var number4=Math.floor(Math.random()*100);
	var piao4=document.getElementById('piao4');
	var timerId4 =setInterval(function(){
		oHeight4+=step4;
		name4.style.height=oHeight4+"%";
		piao4.innerHTML=oHeight4+"票";
		if(oHeight4>=number4){
			clearInterval(timerId4);
		}
	},100);
	

		
	</script>


</body>
</html>